www.gusucode.com > 有意思的HTML5 圆形钢琴，演奏出动人乐章源码程序 > 有意思的HTML5 圆形钢琴，演奏出动人乐章/html5svgpiano/html5-svg-piano/css/style.css

    html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #444;
  color: #fff;
}
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
.ctrl {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 125px;
  height: 225px;
  text-align: center;
}
.ctrl label {
  display: block;
}
.ctrl input {
  box-sizing: border-box;
  width: 50px;
  text-align: center;
  color: #000;
  border: 1px solid #000;
}
svg {
  height: 100%;
  width: 100%;
  vertical-align: top;
}
svg .keyboard path {
  stroke: #000;
  fill: #fff;
  cursor: pointer;
  vector-effect: non-scaling-stroke;
}
svg .keyboard path.sharp {
  fill: #000;
}
svg .keyboard path.ut {
  fill: #faa;
}
svg .keyboard path.first-ut {
  fill: #f44;
}
svg .keyboard path:hover {
  fill: #808080;
}